<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>确认订单</title>
    <link rel="stylesheet" href="assets/css/amazeui.min.css">
    <link rel="stylesheet" href="assets/css/app.css">
    <link rel="stylesheet" href="css/index/index.css">
</head>

<body>
    <header>
        <img src="img/z-jiantou.png">
        <span>确认订单</span>
    </header>

    <main class="mar_bottom_75">
        <div class="order_f1">
            <ul class="f1_left">
                <li>
                    收货人：李思思
                    <span>13646005163</span>
                </li>
                <li class="f1_2">
                    <p>
                        <i></i>
                    </p>
                    收货地址：福建生思明区软件园二期观日路30号之六508B
                </li>
            </ul>
            <p class="f1_right">
                <img src="img/y-jiantou.png" width="10">
            </p>
        </div>
        <ul class="order_f2">
            <li class="f2_left">
                <img src="img/img_left.jpg">
            </li>
            <li class="f2_center">
                <p>原生态无污染蜂蜜</p>
                <p>￥280.00</p>
            </li>
            <li class="f2_right">
                ×1
            </li>
        </ul>
        <div class="order_f3">
            <div class="h45 f3_1">
                购买数量
                <ul>
                    <li class="reduce_btn">-</li>
                    <li class="num">1</li>
                    <li class="add_btn">+</li>
                </ul>
            </div>
            <div class="h45 f3_2">买家留言
                <input type="text" placeholder="填写买家留言信息">
            </div>
            <div class="h45 f3_2">配送方式
                <span>免邮</span>
            </div>
            <div class="h45 am-text-right color_active">
                共1件商品 合计:￥280.00
            </div>
            <a href="javascript:;" class="h45 f3_5">
                优惠券
                <p class="color_active">
                    有2个可用
                    <img src="img/y-jiantou.png" width="10" height="16">
                </p>
            </a>
        </div>
        <div class="order_f4">
            <div class="f4_0">支付方式</div>
            <label class="h45 custom_radio">支付宝支付
                <div class="">
                    <input type="radio" name="radio" checked>
                    <i></i>
                </div>
            </label>
            <label class="h45 custom_radio">微信支付
                <div class="">
                    <input type="radio" name="radio">
                    <i></i>
                </div>
            </label>
            <label class="h45 custom_radio">算力积分
                <div class="">
                    <input type="radio" name="radio">
                    <i></i>
                </div>
            </label>
        </div>
    </main>

    <div class="payment_btn">
        共2件
        <div>
            <p>
                合计:
                <span class="color_active">￥280.00</span>
            </p>

            <button class="bg-btn complete_btn" type="button">付款</button>
        </div>

    </div>


    <div class="pay_pwd_mask">
        <div class="pay_pwd_wrap">
            <ul class="pay_pwd_top">
                <li>
                    <i class="pwd_close_btn"></i>
                </li>
                <li>
                    <span></span>
                </li>
            </ul>
            <div class="pay_pwd">
                <p>请输入支付密码，以验证身份</p>
                <div class="input_pwd">
                    <input type="password" maxlength="1">
                    <input type="password" maxlength="1">
                    <input type="password" maxlength="1">
                    <input type="password" maxlength="1">
                    <input type="password" maxlength="1">
                    <input type="password" maxlength="1">
                </div>
            </div>
            <div class="confirm_btn">
                <button class="bg-btn h45" type="button">确认</button>
            </div>
        </div>
    </div>


    <script src="js/jquery-1.11.3.js"></script>
    <script>
        $(function () {
            //加减
            var num = $('.num').text();
            $('.add_btn').on('click', function () {
                num++;
                $(this).prev().text(num);
            });
            $('.reduce_btn').on('click', function () {
                if (num > 1) {
                    num--;
                    $(this).next().text(num);
                }
            });

            // 弹出输入密码框
            $('.complete_btn').click(function () {
                $('.pay_pwd_mask').show();
            })
            $('.pwd_close_btn').click(function () {
                $('.pay_pwd_mask').hide();
            })

            //六位密码
            $(".input_pwd input").focus();
            $(".input_pwd input").on("keyup", function (event) {
                if (event.which == 8) {
                    $(this).val("").prev().focus();
                } else {
                    if (!$(this).val().match(/^\d{1}$/)) {
                        $(this).val("");
                    } else {
                        $(this).next().focus();
                    }
                }
            });
        })
    </script>
</body>

</html>